/* =========================================
           1. تنظیمات کلی و متغیرها (Global Styles)
           ========================================= */
        :root {
            --bg-color: #0f172a;
            --card-bg: rgba(30, 41, 59, 0.7);
            --accent-color: #38bdf8;       /* آبی روشن */
            --secondary-accent: #a855f7;   /* بنفش (برای هوش مصنوعی) */
            --movie-accent: #f43f5e;       /* قرمز (برای بخش فیلم) */
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --code-bg: #1e293b;
        }
        @font-face {
            font-family: Vazir;
            src: url(/site\ fonts/Vazir.woff);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Vazir', sans-serif; scroll-behavior: smooth; }
        body { background-color: var(--bg-color); color: var(--text-primary); overflow-x: hidden; }

        /* انیمیشن پس‌زمینه */
        .bg-animation { position: fixed; width: 100%; height: 100%; z-index: -1; top: 0; left: 0; pointer-events: none; }
        .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.3; animation: float 10s infinite ease-in-out; }
        .orb-1 { width: 300px; height: 300px; background: var(--accent-color); top: -50px; left: -50px; }
        .orb-2 { width: 400px; height: 400px; background: var(--secondary-accent); bottom: -100px; right: -100px; animation-delay: 5s; }
        @keyframes float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, 50px); } }

        /* هدر و نویگیشن */
        nav {
            display: flex; justify-content: space-between; align-items: center; padding: 20px 50px;
            backdrop-filter: blur(12px); background: rgba(15, 23, 42, 0.6);
            position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .logo { /*font-size: 1.5rem; font-weight: 900; color: var(--accent-color); text-shadow: 0 0 15px rgba(56, 189, 248, 0.4);*/ border-radius: 50%; width: 80px; }
        .nav-links a { color: var(--text-primary); text-decoration: none; margin-right: 20px; transition: 0.3s; font-size: 0.95rem; }
        .nav-links a:hover { color: var(--accent-color); }

        /* استایل‌های مشترک */
        .container { max-width: 1200px; margin: 0 auto; padding: 60px 20px; }
        .section-title { font-size: 2rem; margin-bottom: 40px; border-right: 5px solid var(--accent-color); padding-right: 15px; }
        
        /* گرید سیستم */
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

        /* =========================================
           2. بخش Hero (تایپ خودکار)
           ========================================= */
        .hero { height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 20px; }
        .hero h1 { font-size: 3rem; margin-bottom: 20px; }
        .typing-text { color: var(--accent-color); border-left: 3px solid var(--accent-color); padding-left: 10px; animation: blink 0.7s infinite;}
        @keyframes blink { 50% { border-color: transparent; } }

        /* =========================================
           3. بخش مقالات (Blog Styles)
           ========================================= */
        .blog-card {
            background: var(--card-bg); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 25px;
            transition: 0.4s; position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); /* برای انیمیشن اسکرول */
        }
        .blog-card.show { opacity: 1; transform: translateY(0); }
        .blog-card:hover { transform: translateY(-10px); border-color: var(--accent-color); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
        .tag { background: rgba(56, 189, 248, 0.15); color: var(--accent-color); padding: 5px 12px; border-radius: 8px; font-size: 0.8rem; display: inline-block; margin-bottom: 15px; }
        .code-snippet { background: var(--code-bg); padding: 12px; border-radius: 8px; font-family: monospace; direction: ltr; text-align: left; color: #a5b4fc; margin-bottom: 15px; border-right: 2px solid var(--accent-color); }
        .read-more { color: var(--accent-color); text-decoration: none; font-weight: bold; font-size: 0.9rem; }

        /* =========================================
           4. بخش فیلم‌ها (Movie Styles)
           ========================================= */

        #movies { background: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.05); margin-top: 50px; }
        
        .movie-search-box { margin-bottom: 30px; display: flex; justify-content: center; }
        .movie-search-box input {
            width: 100%; max-width: 500px; padding: 15px 25px; border-radius: 50px; 
            border: 1px solid #333; background: #1e293b; color: white; outline: none; transition: 0.3s;
        }
        .movie-search-box input:focus { border-color: var(--movie-accent); box-shadow: 0 0 15px rgba(244, 63, 94, 0.4); }

        /* استایل کارت ویدیو - تغییر یافته برای لینک */
        .movie-card {
            background: #1e1e1e; border-radius: 12px; overflow: hidden; 
            transition: all 0.3s ease; position: relative; display: block; text-decoration: none; /* برای تگ a */
        }
        
        /* انیمیشن هاور */
        .movie-card:hover { 
            transform: translateY(-10px) scale(1.02); 
            z-index: 10; 
            box-shadow: 0 15px 30px rgba(0,0,0,0.5); 
            border: 1px solid var(--movie-accent);
        }

        /* کاور ویدیو - تغییر سایز به نسبت 16:9 */
        .poster { 
            height: 200px; /* ارتفاع کمتر برای کاور ویدیو */
            width: 100%; 
            object-fit: cover; 
            border-bottom: 2px solid var(--movie-accent);
        }

        .movie-info { padding: 20px; position: relative; }

        /* برچسب دسته‌بندی جایگزین امتیاز */
        .category-tag {
            position: absolute; top: -15px; left: 15px; 
            background: var(--movie-accent); color: white; 
            font-size: 0.8rem; padding: 5px 12px; border-radius: 20px; 
            box-shadow: 0 4px 10px rgba(244, 63, 94, 0.4);
        }

        .movie-title { 
            font-size: 1.1rem; margin-top: 10px; color: var(--text-primary);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
        }
        
        .movie-desc { 
            color: var(--text-secondary); font-size: 0.85rem; margin-top: 8px; display: block; line-height: 1.6;
        }

        /* آیکون پخش روی تصویر */
        .play-icon {
            position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%);
            font-size: 3rem; color: rgba(255,255,255,0.8); opacity: 0; transition: 0.3s;
        }
        .movie-card:hover .play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
        /* =========================================
           5. ایلاچت (AI Chat Widget)
           ========================================= */
        .chat-toggle {
            position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px;
            background: linear-gradient(135deg, var(--accent-color), var(--secondary-accent));
            border-radius: 50%; border: none; cursor: pointer; box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
            z-index: 1000; display: flex; align-items: center; justify-content: center; font-size: 30px; transition: transform 0.3s;
        }
        .chat-toggle:hover { transform: scale(1.1) rotate(10deg); }

        .chat-window {
            position: fixed; bottom: 100px; right: 30px; width: 340px; height: 480px;
            background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(15px);
            border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.5); z-index: 1000;
            display: flex; flex-direction: column; opacity: 0; transform: translateY(20px) scale(0.9);
            pointer-events: none; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .chat-window.active { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }

        .chat-header { background: linear-gradient(90deg, var(--secondary-accent), #7c3aed); padding: 15px; display: flex; justify-content: space-between; align-items: center; border-radius: 20px 20px 0 0; }
        .chat-body { flex: 1; padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
        
        .message { max-width: 80%; padding: 10px 15px; border-radius: 12px; font-size: 0.9rem; line-height: 1.5; animation: popIn 0.3s ease; }
        @keyframes popIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        
        .bot-msg { background: rgba(255,255,255,0.1); color: white; align-self: flex-start; border-bottom-right-radius: 2px; }
        .user-msg { background: var(--accent-color); color: #0f172a; align-self: flex-end; border-bottom-left-radius: 2px; font-weight: bold; }

        .chat-input-area { padding: 15px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; gap: 10px; }
        .chat-input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 10px; color: white; outline: none; }
        .send-btn { background: var(--secondary-accent); border: none; width: 38px; height: 38px; border-radius: 50%; color: white; cursor: pointer; }

        .typing { font-size: 0.7rem; color: #94a3b8; display: none; margin-bottom: 5px; padding-right: 15px; }
        .typing span { animation: blink 1.4s infinite both; }
        .typing span:nth-child(2) { animation-delay: 0.2s; } .typing span:nth-child(3) { animation-delay: 0.4s; }